<template>
    <div>
        <div height="">
            <el-row :gutter="0">
                <el-col>
                    <p class="module-title">任务调度</p>
                </el-col>
            </el-row>
        </div>
        <div height="">
            <div class="bg-white pd-20px">
            	<el-row :gutter="20" class="border-bottom">
            		<el-form :model="queryForm" ref="queryForm" label-width="80px">
            		    <el-col :span="4">
	            	       <el-form-item label="任务名称">
	            		        <el-input v-model="queryForm.name" size="mini"></el-input>
	            		    </el-form-item>
	            	    </el-col>
	            	    <el-col :span="4">
	            	       <el-form-item label="是否启用">
	            		        <el-select v-model="queryForm.enabled" placeholder="">
	            		            <el-option v-for="item in enabled"
	            		                :key="item.value"
	            		                :label="item.label"
	            		                :value="item.value">
	            		            </el-option>
	            		        </el-select>
	            		    </el-form-item>
	            	    </el-col>
	            	    <el-col :span="12">
	            	        <el-form-item>
	            		        <el-button type="primary" @click="queryTask">查询</el-button>
	            		    </el-form-item>
	            	    </el-col>
	            	    <el-col :span="4">
							<div class="float-right">
	            	        	<el-button @click="showTaskDialog">添加任务</el-button>
							</div>
	            	    </el-col>
            		</el-form>
            	</el-row>

				<el-table :data="tasks">
					<el-table-column prop="rowNum" label="编号">
					</el-table-column>
					<el-table-column prop="name" label="任务名称"></el-table-column>
					<el-table-column prop="description" label="描述"></el-table-column>
					<el-table-column prop="cronExpression" label="定时表达式"></el-table-column>
					<el-table-column prop="url" label="URL"></el-table-column>
					<el-table-column prop="requestType" label="请求类型"></el-table-column>
					<el-table-column prop="enabled" label="是否启用">
						<template slot-scope="scope">
							<el-button type="text" v-if="scope.row.enabled">已启用</el-button>
							<el-button type="text" v-else>未启用</el-button>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="mini">编辑</el-button>
							<el-button type="text" size="mini">{{scope.row.enabled ? '停用' : '启用'}}</el-button>
							<el-button type="text" size="mini">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<el-dialog title="调度任务"
				 :visible.sync="showDialog"
				  width="42%"
				   @close="showDialog = false"
				    :before-close="handleClose">
					<el-form :model="taskForm" ref="taskForm" label-width="82px" style="padding: 0 20px;">
						<el-row :gutter="40">
							<el-col :span="12">
								<el-form-item label="任务名称">
									<el-input v-model="taskForm.name"></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item label="任务描述">
									<el-input v-model="taskForm.description"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="40">
							<el-col :span="12">
								<el-form-item label="URL">
									<el-input v-model="taskForm.url" placeholder="完整URL路径(含http/https)"></el-input>
								</el-form-item>
							</el-col>
							
							<el-col :span="12">
								<el-form-item label="请求类型">
									<el-radio v-model="taskForm.requestType" label="GET"></el-radio>
									<el-radio v-model="taskForm.requestType" label="POST"></el-radio>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="40">
							<el-col :span="12">
								<el-form-item label="定时表达式">
									<el-input v-model="taskForm.cronExpression" placeholder="0 * * * * ?"></el-input>
								</el-form-item>
							</el-col>
								<el-col :span="12">
								<el-form-item label="是否启用">
									<el-radio v-model="taskForm.enabled" label="是"></el-radio>
									<el-radio v-model="taskForm.enabled" label="否"></el-radio>
								</el-form-item>
							</el-col>
							
						</el-row>
						<el-row :gutter="40">
							<el-col>
								<el-form-item label="请求数据">
									<el-input type="textarea" v-model="taskForm.requestData" placeholder="请输入JSON格式字符串"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-form-item>
							<el-button type="primary" @click="createTaskOrUpdate">立即创建</el-button>
							<el-button @click="showDialog = false">取消</el-button>
						</el-form-item>
					</el-form>
				</el-dialog>

            </div>
        </div>
    </div>
</template>
<script>
export default{
	name: 'CronService',
	data () {
		return {
			showDialog: false,
			queryForm: {
				enabled: '',
				name: '',
			},
			taskForm: {
				name: '',
				description: '',
				cronExpression: '',
				url: '',
				requestType:'',
				enabled: '',
				requestData:'',
			},
			currentTask: null,
			enabled:[
				{
					label: '全部',
					value: '',
				},
				{
					label: '是',
					value: '1'
				},
				{
					label: '否',
					value: '0'
				}
			],
			tasks: [
				{
				    "id": 4,
				    "name": "ztt",
				    "description": "descc",
				    "cronExpression": "ttt",
				    "url": "url4",
				    "requestType": 1,
				    "requestData": "{\"firstName\":\"Brett\",\"lastName\":\"McLaughlin\",\"email\":\"aaaa\"}",
				    "enabled": false,
				    "createTime": "2018-05-31T04:39:40.593Z",
				    "modifiedTime": "2018-06-02T02:47:05.055Z"
				}
			]
		}
	},
	methods:{
		queryTask(){

		},
		showTaskDialog(){
			this.showDialog = true;
		},
		createTaskOrUpdate(){

		},
		handleClose(done) {
			this.$confirm('确认关闭？')
			.then(_ => {
				done();
			})
			.catch(_ => {});
			}
	}
}
</script>
<style scoped></style>